<template>
  <div class="home">
    <!-- 银行卡展示区域 -->
    <bank-card></bank-card>
    
    <!-- 功能按钮区域 -->
    <div class="function-area">
      <van-grid :column-num="3" :border="false">
        <van-grid-item v-for="(item, index) in functions" :key="index" :icon="item.icon" :text="item.text" @click="handleGridItemClick(item)" />
      </van-grid>
    </div>

    <!-- 使用新的底部导航栏组件 -->
    <tab-bar />
  </div>
</template>

<script>
import BankCard from '@/components/BankCard.vue'
import TabBar from '@/components/TabBar.vue'

export default {
  name: 'Home',
  components: {
    BankCard,
    TabBar
  },
  data() {
    return {
      functions: [
        { icon: 'credit-pay', text: '登记账号卡' },
        { icon: 'replay', text: '账户退销申请' },
        { icon: 'card', text: '卡片挂失' },
        { icon: 'description', text: '交易明细' },
        { icon: 'setting-o', text: '支付设置' },
        { icon: 'scan', text: '扫一扫' },
        { icon: 'question-o', text: '访客系统' },
        { icon: 'service', text: '智慧音堂' }
      ]
    }
  },
  methods: {
    handleGridItemClick(item) {
      if (item.text === '访客系统') {
        this.$router.push('/attendance')
      }
    }
  }
}
</script>

<style scoped>
.home {
  padding-bottom: 50px;
}

.function-area {
  background: #fff;
  margin-top: 20px;
  padding: 10px 0;
}
</style> 